import {PlusOutlined} from '@ant-design/icons';
import {Button} from 'antd';
import React, {useRef} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {isSuccess} from "@/utils/utils";
import {Marketing} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import {history} from "@@/core/history";


const ContentList: React.FC<any> = () => {

  const actionRef = useRef<ActionType>();

  const columns: ProColumns[] = [
    {
      title: '关键词',
      dataIndex: 'keywords',
      hideInForm: true,
      hideInTable: true,
    },
    {
      title: '内容名称',
      dataIndex: 'name',
      hideInSearch: true,
      ellipsis: true,
      fixed: 'left'
    },
    {
      title: '标题',
      dataIndex: 'title',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '封面',
      dataIndex: 'cover',
      valueType: 'image',
      width: 250,
      hideInSearch: true,
      render: (dom, record) => record.cover ? <img src={record.cover.url} alt={record.title} height={40}/> : '--'
    },
    {
      title: '内容类型',
      dataIndex: 'type',
      valueEnum: SYS_ENUMS.CONTENT_TYPE,
      width: 200,
    },
    {
      title: '所属账号',
      dataIndex: 'account',
      width: 150,
      ellipsis: true,
    },
    {
      title: '操作者',
      dataIndex: 'operatorName',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'gmtCreate',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '发布时间',
      dataIndex: 'gmtModified',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      fixed: 'right',
      render: (_, record) => [
        <a key="edit"
           onClick={()=>history.push(`/marketing/content/edit/${record.id}`)}
        >编辑</a>
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<any, any>
        headerTitle='内容列表'
        actionRef={actionRef}
        rowKey="id"
        search={{labelWidth: 120,}}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={()=>history.push(`/marketing/content/edit`)}>
            <PlusOutlined/> 添加内容
          </Button>,
        ]}
        request={async (params) => {

          const {data: {data, total}, code}: any = await Marketing.contentList(params);

          return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
        }}
        columns={columns}
        scroll={{ x: 1300 }}
      />
    </PageContainer>
  );
};

export default ContentList;
